import React, {useContext, useEffect, useState} from "react";
import {Dimensions, TouchableOpacity, View, Text, ActivityIndicator, ScrollView, FlatList} from "react-native";
import {Avatar} from "react-native-elements/dist/avatar/Avatar";
import {Icon} from "react-native-elements/dist/icons/Icon";
import Clipboard from "@react-native-community/clipboard";
import Toast from "react-native-simple-toast";
import LocaleContext from "../libs/locale";
import {Divider} from "react-native-elements/dist/divider/Divider";
import NFT from "../assets/Assets/NFT.png";
import NFT_NULL from "../assets/Assets/NFT_NULL.png";
import logo from '../assets/logo.png';
import {Image} from "react-native-elements/dist/image/Image";
import {Card} from "react-native-elements/dist/card/Card";
import {getNFTDetailList, NFTView_IDSize, NFTView_TitleSize} from "../libs/NFTView";
import SmartXLogo from "../assets/NFT/SmartXNFT.png";

const {width,height,scale} = Dimensions.get("window");

const NFTContract = ({navigation,route}:any) => {
    const locale:any = useContext(LocaleContext);
    const [NFT_Item, setNFT_Item] = useState(route?.params?.item);
    const [myNFTS,setMyNFTS]:any = useState([]);
    const [showMore, setShowMore] = useState(false);
    useEffect(()=>{
        const work = async () => {
            let res = await getNFTDetailList(NFT_Item.contract, NFT_Item.myNFTS);
            console.log(res)
            setMyNFTS(res);
        }
        navigation.setOptions({title: locale._("NFT_Contract_Detail")})
        work();

    },[])

    const copy_contract = () => {
        Clipboard.setString(NFT_Item.contract);
        Toast.show(locale?._('copied') as string);
    }
    const renderItem = ({item,index}:any) => {
        return (
            <TouchableOpacity activeOpacity={1} onPress={()=>{
                navigation.push('NFTDetail',{item:item,contract:NFT_Item.contract});
            }}>
                <View style={{flexDirection:"column",width: (width-50)/2,borderRadius:10,borderWidth:1/scale,marginBottom:25}}>
                    <Image
                        source={item["detail"].image!=undefined?{uri: item["detail"].image}:NFT_NULL}
                        style={{ width: (width-50)/2, height: 150 ,borderRadius:10}}
                        PlaceholderContent={<Image
                            style={{width:width-30,height:150}}
                            source={NFT_NULL}/>}
                    />
                    <Text style={{paddingLeft:10,fontSize:NFTView_TitleSize,lineHeight:30}}>{item.detail.name}</Text>
                    <Text style={{paddingLeft:10,fontSize:NFTView_IDSize,color:"grey",lineHeight:12,marginBottom:8}}>#{item.id}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    return (
        <View style={{flex:1,alignItems:"center",padding:15,paddingTop:0}}>
            <View style={{width:width-30,height:width*0.2,flexDirection:"row",alignItems:"center",borderBottomWidth:1/scale,borderBottomColor:"rgb(239, 239, 239)"}}>
                {
                    NFT_Item.contract==="c3MbYezD7CV9KcRZbnoVTmT6SMAzs2REL"?
                        <Avatar source={SmartXLogo} rounded={true} size={40}/>
                        :
                        <Avatar title={NFT_Item.name.slice(0,2)} containerStyle={{backgroundColor:"lightgrey"}} rounded={true} size={40}/>
                }


                <View style={{flex:1,flexDirection:"column",padding:15,paddingLeft:10}}>
                    <Text style={{fontWeight:"normal",fontSize:NFTView_TitleSize,flex:1,textAlignVertical:"bottom"}}>{NFT_Item.name}</Text>
                    <View style={{flex:1,flexDirection:"row",alignItems:"center"}}>
                        <Text style={{fontWeight:"normal",fontSize:NFTView_IDSize,color:"grey",textAlignVertical:"top",marginRight:5}}>{NFT_Item.contract.slice(0,10)}...{NFT_Item.contract.slice(-10)}</Text>
                        <Icon
                              name='copy'
                              type='font-awesome'
                              color='grey'
                              size={NFTView_IDSize}
                              activeOpacity={0.5}
                              onPress={copy_contract}
                        />
                    </View>
                </View>
            </View>
            {/*<View style={{flexDirection:"row",paddingTop:10,paddingBottom:10,borderBottomWidth:1/scale,borderBottomColor:"#F5F5F5"}}>
                {
                    NFT_Item.desc.length>50 && !showMore?
                        <TouchableOpacity onPress={()=>{
                            let res = showMore;
                            setShowMore(!res);
                        }} activeOpacity={1}>
                            <View style={{flexDirection:"row"}}>
                                <Text style={{fontWeight:"normal",fontSize:width*0.035,color:"grey"}}>
                                    {NFT_Item.desc.slice(0,70)}...<Text style={{fontWeight:"normal",fontSize:width*0.035,color:"blue"}}>更多</Text>
                                </Text>
                            </View>
                        </TouchableOpacity>
                        :
                        <TouchableOpacity onPress={()=>{
                            let res = showMore;
                            setShowMore(!res);
                        }} activeOpacity={1}>
                            <Text style={{fontWeight:"normal",fontSize:width*0.035,color:"grey"}}>
                                {NFT_Item.desc}
                            </Text>
                        </TouchableOpacity>
                }
            </View>
            <View style={{flexDirection:"row",justifyContent:"space-between",width:'100%'}}>
                <View style={{flexDirection:"column",flex:1,padding:15,alignItems:"center"}}>
                    <View style={{flexDirection:"row"}}>
                        <Avatar source={logo} size={20} activeOpacity={1} rounded={true}/>
                        <Text style={{fontSize:15,marginLeft:5}}>0.0329</Text>
                    </View>
                    <Text style={{fontSize:12,color:"grey"}}>24h 最低价</Text>
                </View>
                <View style={{flexDirection:"column",flex:1,padding:15,alignItems:"center"}}>
                    <View style={{flexDirection:"row"}}>
                        <Avatar source={logo} size={20} activeOpacity={1} rounded={true}/>
                        <Text style={{fontSize:15,marginLeft:5}}>0.304</Text>
                    </View>
                    <Text style={{fontSize:12,color:"grey"}}>24h 平均价</Text>
                </View>
                <View style={{flexDirection:"column",flex:1,padding:15,alignItems:"center"}}>
                    <View style={{flexDirection:"row"}}>
                        <Avatar source={logo} size={20} activeOpacity={1} rounded={true}/>
                        <Text style={{fontSize:15,marginLeft:5}}>68.0877</Text>
                    </View>
                    <Text style={{fontSize:12,color:"grey"}}>24h 成交量</Text>
                </View>
            </View>*/}
            <View style={{width:width,height:10,backgroundColor:"rgb(239, 239, 239)"}}/>
            <View style={{paddingTop:10,flexDirection:"column",alignItems:"flex-start",width:width-30}}>
                <Text style={{alignSelf:"flex-start",marginBottom:10,fontSize:NFTView_TitleSize}}>{locale._("NFT_Contract_Assets")}</Text>
                <View style={{width:width-30,minHeight:300}}>
                    <FlatList
                        data={myNFTS}
                        renderItem={renderItem}
                        keyExtractor={item => item.id+"_NFT_show"}
                        numColumns={2}
                        columnWrapperStyle={{justifyContent:"space-between"}}
                        // contentContainerStyle={{flexDirection:"row",justifyContent:"space-between",flexWrap:"wrap"}}
                        ListEmptyComponent={<Image
                            PlaceholderContent={<ActivityIndicator />}
                            style={{width:width-30,height:300}}
                            source={NFT}/>}
                        ListFooterComponent={<View style={{width:width,height:200}}/>}
                    />
                </View>
            </View>

        </View>
    )
};

export default NFTContract;


